import { Button, Card } from 'antd';
import ChartCore from 'react-echarts-core';
import type { EChartsOption } from 'react-echarts-core';
import { useEffect, useState } from 'react';
import { useUserContext } from '@/hooks/userHooks';
import { useGoTo } from '@/hooks';
import { ROUTE_KEY } from '@/routes/menus';
import { useCourses } from '@/services/course';
import { useOrganizations } from '@/services/org';
import style from './index.module.less';
/**
*
*/
const Home = () => {
  const { store } = useUserContext();
  const { data } = useOrganizations(1, 10, true);
  const { refetch } = useCourses();
  const [courseNames, setCourseNames] = useState([]);
  const [limitNumber, setLimitNumber] = useState([]);

  const [markers, setMakers] = useState([]);
  const getList = () => {
    // 获取当前组织的信息
    const echartsData = data?.filter((item) => item.id === store.currentOrg);
    const name = echartsData ? echartsData[0].name : '';
    // console.log(name, 'name');
    // 获取当前组织的课程信息
    refetch(name).then((result) => {
      // console.log('result.data', result.data);
      const names = result.data.map((course) => course.name);
      const limits = result.data.map((limit) => limit.limitNumber);
      setCourseNames(names);
      setLimitNumber(limits);
    });
  };
  useEffect(() => {
    getList();
    const map = new window.BMapGL.Map('index-top');
    const point = new window.BMapGL.Point(115.49529608458236, 38.82368602922524);
    map.centerAndZoom(point, 12);
    map.enableScrollWheelZoom(true);

    // 设置地图事件
    map.addEventListener('click', (e) => {
      console.log(e.latlng, '是不是点击了');
      const points = new window.BMapGL.Point(e.latlng.lng, e.latlng.lat);
      const marker = new window.BMapGL.Marker(points);
      map.addOverlay(marker);
      setMakers([...markers, marker]);
    });
    markers.forEach((marker) => {
      map.addOverlay(marker);
    });
  }, [store.currentOrg]);
  const { go } = useGoTo();
  const option: EChartsOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      data: courseNames,
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '课程',
        barWidth: '60%',
        data: limitNumber,
        type: 'bar'
      }
    ]
  };

  return (
    <div className={style.container}>
      <Button onClick={() => go(ROUTE_KEY.MY)}>
        去个人中心
      </Button>
      <Button onClick={() => {}}>去支付</Button>
      <div className={style.middle}>
        <div className={style.cards}>
          <Card style={{ width: '500px' }}>
            <p>门店信息</p>
            <h4>{JSON.parse(localStorage.getItem('LOCAL_CURRENT_ORG')).label}</h4>
          </Card>
          <Card style={{ width: '500px', left: '200px' }}>
            <p>学员信息</p>
            <h4>{store.desc}</h4>
          </Card>
        </div>
        <div className={style.css}>
          <Card className={style.main}>
            <p>课程信息</p>
            {courseNames.length ? (
              <ChartCore option={option} style={{ width: '400px', height: '300px' }} />
            ) : (
              <p className={style.pp}>Loading...</p>
            )}
          </Card>
          <div id="index-top" className={style.bottom} />
        </div>
      </div>
    </div>
  );
};

export default Home;
